<template>
  <div class="container">
    <!-- logo -->
    <div class="content">
      <div class="right">
        <div>
          <Image src="../../../assets/logo.png" />
        </div>
        <div class="title">欢迎登录<br />康卫通<br />DRG-DIP一体化平台</div>
        <div class="desc">
          Welcome Login KWT <br />DRG-DIP Platform
          <div class="demo-login">
            <Login @on-submit="handleSubmit">
              <UserName name="username" />
              <Password name="password" enter-to-submit />
              <div class="demo-auto-login">
                <Checkbox v-model="autoLogin" size="large">记住我</Checkbox>
              </div>
              <Submit :loading="loading"
                ><span>{{ loading ? '登录中...' : '登录系统' }}</span></Submit
              >
            </Login>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      Copyright © {{ moment().year() }} 技术支持：康卫通信息科技成都有限公司
    </div>
  </div>
</template>
<script setup>
import { useCommonStore } from '@/stores/common.js'
const commonStore = useCommonStore()
import { JSEncrypt } from 'encryptlong'
import http from '@/util/http1'
import { useRouteStore } from '@/stores/route.js'
import moment from 'moment'
const store = useRouteStore()
const router = useRouter()
let { proxy } = getCurrentInstance()
const is_show = ref(false)
const autoLogin = ref(false)
const loading = ref(false)

onMounted(() => {
  const iAutoLogin = localStorage.getItem('autoLogin')
  if (iAutoLogin == 'true') {
    autoLogin.value = true
    const username = localStorage.getItem('username')
    const pwd = localStorage.getItem('pwd')
    document.getElementsByName('username')[0].value = username
    document.getElementsByName('username')[0].dispatchEvent(new Event('input'))
    document.getElementsByName('password')[0].value = pwd
    document.getElementsByName('password')[0].dispatchEvent(new Event('input'))
  }
})

const handleSubmit = async (valid, { username, password }) => {
  if (loading.value) return
  if (valid) {
    try {
      loading.value = true
      is_show.value = true

      const jsencrypt = new JSEncrypt()
      jsencrypt.setPublicKey(import.meta.env.VITE_PUBLICKEY)
      let en_account = jsencrypt.encryptLong(username)
      let en_pwd = jsencrypt.encryptLong(password)

      let res = await http.post('Basic/Sys/Login', { account: en_account, pwd: en_pwd })
      if (res.flag) {
        proxy.$Message.success('登录成功')

        if (autoLogin.value) {
          localStorage.setItem('autoLogin', autoLogin.value)
          localStorage.setItem('username', username)
          localStorage.setItem('pwd', password)
        } else {
          localStorage.removeItem('autoLogin')
          localStorage.removeItem('username')
          localStorage.removeItem('pwd')
        }
        // DRG
        commonStore.savePolicy(res.data.policy)
        sessionStorage.setItem('token', res.data.access_token)
        sessionStorage.setItem('tenant', res.data.tenant_id)
        sessionStorage.setItem('role', res.data.role_id)

        let res1 = await http.get('/Basic/Menu/RouteList', {})
        store.AddRoute(res1.data)

        router.push('/Basic/System/Index')
      } else {
        proxy.$Message.error(res.msg)
      }
    } catch (error) {
      proxy.$Message.error('登录失败，请重试!')
      console.error('登录错误:', error)
    } finally {
      loading.value = false
      is_show.value = false
    }
  } else {
    proxy.$Message.error('表单验证失败!')
  }
}
</script>

<style lang="scss" scoped>
:deep(.ivu-login-submit) {
  width: 270px;
  margin-top: 38px;

  span {
    font-size: 12px;
    color: #ffffff;
    line-height: 16px;
  }
}

:deep(.ivu-login-username) {
  width: 270px;
}

:deep(.ivu-login-password) {
  width: 270px;
}

:deep(.ivu-input-large) {
  padding-left: 57px;
  font-size: 11px;
}

:deep(.ivu-icon-ios-contact-outline:before) {
  width: 15px;
  height: 15px;
  padding-left: 15px;
  color: #4282e9;
}

:deep(.ivu-icon-ios-lock-outline:before) {
  width: 15px;
  height: 15px;
  padding-left: 15px;
  color: #4282e9;
}

:deep(.ivu-btn-loading) {
  opacity: 0.8;
  cursor: not-allowed;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('../../../assets/Login.png') no-repeat;
  background-size: 100% 100%;
  padding: 10px;

  .content {
    display: flex;
    justify-content: space-around;
    box-shadow: 0px 30px 60px 0px rgba(210, 225, 255, 1);
    width: 200px;
    height: 560px;
    min-width: 500px;
    position: absolute;
    top: 50%;
    left: 75%;
    border-radius: 15px;
    transform: translate(-50%, -50%);

    .right {
      flex: 1;
      width: 200px;
      min-width: 200px;
      padding: 20px 120px 38px;
      /* 水平局中 */
      display: flex;
      flex-direction: column;
      text-align: center;
      background-color: #ffffff;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;

      .title {
        padding-top: 20px;
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        margin-bottom: 11px;
        text-align: center;
      }

      .desc {
        font-size: 14px;
        color: #9f9e9e;
        margin-bottom: 40px;
        text-align: center;
      }

      .demo-login {
        position: relative;
        width: 400px;
        margin: 24px auto 0 !important;

        .border {
          position: absolute;
          top: 11px;
          left: 42px;
          width: 1px;
          height: 17px;
          background-color: #e6e6e6;
        }

        .border1 {
          position: absolute;
          top: 75px;
          left: 42px;
          width: 1px;
          height: 17px;
          background-color: #e6e6e6;
        }
        .demo-auto-login {
          text-align: left;
        }
      }
    }

    .left {
      flex: 1;
      width: 390px;
      min-width: 390px;
      // padding: 55px 47px 52px;
      //background: url("../../assets/Login.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
  }

  .footer {
    display: flex;
    justify-content: space-around;
    width: 435px;
    height: 20px;
    min-width: 435px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
